<template>
  <PageWrapper>
    <BasicTable
      class="page-search-table"
      @register="registerTable"
      :rowSelection="{ type: 'checkbox' }"
      @selection-change="doSelection"
    >
      <template #tableTitle>
        <div class="py-2">
          <a-button type="primary" @click="openAdd">新增</a-button>
          <a-button type="primary" danger @click="openDelMulit">删除</a-button>
        </div>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              icon: 'mdi:apple-icloud',
              tooltip: '云状态',
              onClick: cloudStatus.bind(null, record),
            },
            {
              icon: 'clarity:note-edit-line',
              tooltip: '编辑',
              onClick: goEdite.bind(null, record),
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              tooltip: '删除物模型',
              popConfirm: {
                title: `确认删除物模型:${record.name}吗？`,
                confirm: openDelete.bind(null, record),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <cloudstatusModel ref="cloudstatusRef" />
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, ref, Ref } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { PageWrapper } from '/@/components/Page';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { tableConfig } from './tableData';
  import { DeviceTypeModel } from '/@/extendModel/gatewayModel';
  import cloudstatusModel from './cloudstatusModel.vue';
  import { getDeleteDeviceMode } from '/@/api/sys/gateway/gateway';
  import { useRouter } from 'vue-router';
  export default defineComponent({
    components: { PageWrapper, BasicTable, TableAction, cloudstatusModel },
    setup(_) {
      const { createMessage, createConfirm } = useMessage();
      const checkedKeys = ref<Array<string | number>>([]);
      const [registerTable, { reload }] = useTable(tableConfig);
      const cloudstatusRef: Ref<any> = ref(null);
      const router = useRouter();
      //上云状态
      const cloudStatus = (record) => {
        cloudstatusRef.value.showTable(record);
      };
      //打开新增弹框
      function openAdd() {
        router.push({
          path: '/cloudConfig/modeledite',
        });
      }
      //改版编辑
      function goEdite(rowdata) {
        router.push({
          path: '/cloudConfig/modeledite',
          query: {
            data: JSON.stringify(rowdata),
          },
        });
      }
      //删除
      function openDelete(rowData: DeviceTypeModel) {
        const obj: any = {
          id_list: [],
        };
        obj.id_list.push(rowData.id);
        getDeleteDeviceMode(obj).then(() => {
          reload();
          createMessage.success('删除成功');
        });
      }
      //添加成功回调
      function submitSuccess(e) {
        reload();
        if (e.isreload == false) {
          createMessage.success(e.isUpdate ? '修改成功' : '添加成功');
        }
      }

      function openDelMulit() {
        let delarr: Number[] = [];
        checkedKeys.value.map((item: any) => {
          delarr.push(item.id);
        });
        createConfirm({
          iconType: 'info',
          title: '确定删除吗',
          onOk() {
            getDeleteDeviceMode({
              id_list: delarr,
            });
            reload();
            createMessage.success('删除成功');
          },
        });
      }

      function doSelection(rowdata: Recordable) {
        checkedKeys.value = rowdata.rows;
      }
      return {
        cloudstatusRef,
        cloudStatus,
        submitSuccess,
        registerTable,
        openAdd,
        openDelete,
        openDelMulit,
        doSelection,
        goEdite,
      };
    },
  });
</script>
